<!DOCTYPE html>

<html lang="en">

	<head>

		<meta charset="UTF-8">

		<title>CSS variables, grid layout</title>

		<style>

			*,

			:before {

				box-sizing: border-box;

				margin: 0;

				padding: 0;

			}


			html {

				--i: var(--wide, 1);

				--j: calc(1 - var(--i));

				--k: calc(1 - var(--narr, 0));

				height: 100%;

				background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8));
				font: 400 1em/ 1.25 trebuchet ms, arial, sans-serif;
				
							}
				
				
							@media (max-width: 44.25rem) {
				
								html {
				
									--wide: 0;
				
								}
				
							}
				
				
							@media (max-width: 350px) {
				
								html {
				
									--narr: 1;
				
								}
				
							}
				
				
							@media (max-width: 240px) {
				
								html {
				
									font-size: 0.75em;
				
								}
				
							}
				
				
							article {
				
								--p: var(--parity, 0);
				
								--q: calc(1 - var(--p));
				
								--s: calc(1 - 2*var(--p));
				
								display: grid;
				
								grid-template: calc(var(--i)*3.375rem + var(--j)*4.5rem) calc(var(--i)*6.5rem + var(--j)*3rem) minmax(0, auto)/ calc(var(--i)*calc(var(--q)*17.5rem + var(--p)*14.375rem) + var(--j)*100%) calc(var(--i)*calc(var(--q)*14.375rem + var(--p)*17.5rem));
				
								grid-gap: 0 calc(var(--i)*2rem);
				
								grid-auto-flow: column dense;
				
								margin: calc(var(--i)*3.375rem + var(--j)*1em) auto;
				
								border: solid calc(var(--i)*0.1875rem) transparent;
				
								padding: calc(var(--i)*0.75rem + var(--j)*2vw) calc(var(--i)*4rem + var(--j)*2vw);
				
								width: calc(var(--i)*42.25rem + var(--j)*100%);
				
								border-radius: calc(var(--i)*9.125rem);
				
								box-shadow: calc(var(--i)*1em + var(--j)*0.375em) calc(var(--i)*1em + var(--j)*0.375em) calc(3*calc(var(--i)*1em + var(--j)*0.375em)) rgba(0, 0, 0, 0.5);
				
								background: linear-gradient(calc(var(--s)*90deg), #e6e6e6, #ececec) padding-box, linear-gradient(to right bottom, #fff, #c8c8c8) border-box;
				
								counter-increment: idx;
				
							}
				
				
							article:nth-child(2n) {
				
								--parity: 1;
				
							}
							h3 {
							
											grid-column: calc(1 + var(--i)*var(--q));
							
											grid-row: 1/span calc(1 + 2*var(--i));
							
											margin: calc(var(--i)*-2.25rem) 0;
							
											border: solid calc(var(--i)*0.1875rem) transparent;
							
											padding: calc(var(--i)*2.25rem) calc(var(--i)*2.25rem);
							
											border-radius: calc(var(--i)*calc(var(--q)*50%)) calc(var(--i)*calc(var(--p)*50%));
							
											box-shadow: inherit;
							
											background: linear-gradient(calc(var(--s)*45deg), #ee8c35, #ad4716) padding-box, linear-gradient(calc(var(--s)*-45deg), #ee8c35, #ad4716) border-box;
							
											color: #fff;
							
											font-size: 1.5rem;
							
											font-weight: 400;
							
											line-height: calc(var(--i) + var(--j)*3);
							
											text-align: center;
							
										}
							
							
										h3:before {
							
											font-size: calc(calc(var(--i)*4 + var(--j)*1)*1em);
							
											font-weight: 900;
							
											text-shadow: -2px -1px #999;
							
											content: counter(idx, decimal-leading-zero) " ";
							
										}
							
							
										h4 {
							
											display: flex;
							
											align-items: center;
							
											justify-content: center;
							
											border: solid calc(var(--i)*0.1875rem) #ee8c35;
							
											width: calc(100% - var(--k)*50%);
							
											border-radius: calc(var(--i)*1.265625rem + var(--j)*1.5rem);
							
											color: #ad4716;
							
											text-transform: capitalize;
							
										}
							
							
										h4:before {
							
											margin-right: .25em;
							
											border: solid 2px currentcolor;
							
											width: 1em;
							
											height: 1em;
							
											font-size: 1.75em;
							
											line-height: .8125;
							
											border-radius: 50%;
							
											text-align: center;
							
											content: "+";
							
										}
										p {
										
														padding: 0.75rem 0;
										
														line-height: 150%;
										
													}
										
												</style>
										
											</head>
										
											<body>
										
												<article data-title="data-title">
										
													<h3>java就业班</h3>
										
													<h4>就业班</h4>
										
													<p>“零”基础，大专以下学历<br/>主攻java，带学员入行<br/>初级程序员</p>
										
												</article>
										
												<article data-title="data-title">
										
													<h3>java才高班</h3>
										
													<h4>才高班</h4>
										
													<p>本科以上学历<br/>
										
										主攻大数据分析<br/>
										
										大数据工程师、算法工程师
										
										</p>
										
												</article>
										
												<article data-title="data-title">
										
													<h3>java培优班</h3>
										
													<h4>培优班</h4>
										
													<p>大专以上学历<br/>
										
										主攻互联网架构<br/>
										
										直接胜任中高级程序员
										
										</p>
										
												</article>
										
												<article data-title="data-title">
										
													<h3>java高手班</h3>
										
													<h4>高手班</h4>
										
													<p>有入门门槛，从业人员或学员<br/>
										
										主攻技术底层<br/>
										
										晋升的必由之路
										
										</p>
										
												</article>
										
											</body>
										
										</html>